<template>

  <div>

    <el-card>
      <el-row :gutter="10">
        <el-col :span="8">
          <div style="text-align: center;padding: 30px">
            <!--           <div style="text-align: center">
                         <el-upload ref='uploader' :auto-upload='false' :class="imageUrl ? 'hide': ''" :limit='1'
                                        :on-change='handleChange'
                                        :on-remove='removeChange'
                                        :file-list='filelist'
                                        action='#'
                                        list-type='picture-card' style='width: 148px;height: 148px;margin: 0 auto;'>
                         &lt;!&ndash;                <img :src="MallGoodsImgInfo.imgUrl" v-if="MallGoodsImgInfo.imgUrl" alt="" width="100" height="100"/>&ndash;&gt;
                         <i class='el-icon-plus avatar-uploader-icon'></i>
                       </el-upload>
                         <el-button type='warning' v-if='imageUrl' @click='uploadGoodsImg' i>上传</el-button>
                       </div>-->
            <el-image
                style="width: 150px; height: 150px"
                :src=" $baseURL+userInfo.imgUrl"
                :preview-src-list="[$baseURL+userInfo.imgUrl]">
            </el-image>
            <div style="font-size: 30px">{{ userInfo.name }}</div>
            <div style="font-size: 10px">{{ new Date().toLocaleString() }}</div>
            <div style="font-size: 30px">
              <el-button type="primary" size="mini" @click="dialogVisible=true" round>更改头像</el-button>
              <el-button type="danger" size="mini" @click="isUpt=false" round>更改信息</el-button>
            </div>

          </div>
        </el-col>

        <el-col :span="16" style="height: 300px;border-left: 1px solid #1D1C2E;padding: 20px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="second">
              <el-form ref="form" :model="userInfoALL" label-width="80px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="用户名">
                      <el-input :disabled="isUpt" v-model="userInfoALL.username" size="mini"
                                placeholder="请输入内容"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="邮箱">
                      <el-input :disabled="isUpt" v-model="userInfoALL.email" size="mini"
                                placeholder="请输入内容"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="手机号">
                      <el-input :disabled="isUpt" v-model="userInfoALL.mobile" size="mini"
                                placeholder="请输入内容"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="userInfo.userType==2?'门店':'角色'">
                      <el-input :disabled="true" v-model="userInfoALL.roleName" size="mini"
                                placeholder="请输入内容"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item v-if="userInfo.userType==2" label="职位">
                      <span v-if="userInfo.isAdmin==1" style="color: #5f87ce">管理员</span>
                      <span v-if="userInfo.isAdmin==2" style="color: #5f87ce">员工</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="text-align: center" v-if="!isUpt">
                  <el-button size="mini" type="primary" @click="addUser()" autofocus round>更新信息</el-button>
                  <el-button size="mini" @click="isUpt=true" round>取消更新</el-button>
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="first">
              <el-form ref="form" :model="userInfoALL" label-width="80px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="旧密码">
                      <el-input v-model="userInfoALL.operatorName" size="mini" placeholder="请输入旧密码"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="新密码">
                      <el-input v-model="userInfoALL.operatorName" size="mini" placeholder="请输入新密码"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="确定密码">
                      <el-input v-model="userInfo.operatorName" size="mini" placeholder="确定密码"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>

    </el-card>
    <el-dialog
        title="上传图片"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
      <el-upload ref='uploader' :auto-upload='false' :class="imageUrl ? 'hide': ''" :limit='1'
                 :on-change='handleChange'
                 :on-remove='removeChange'
                 :file-list='filelist'
                 action='#'
                 list-type='picture-card' style='width: 148px;height: 148px;margin: 0 auto;'>
        <!--                <img :src="MallGoodsImgInfo.imgUrl" v-if="MallGoodsImgInfo.imgUrl" alt="" width="100" height="100"/>-->
        <i class='el-icon-plus avatar-uploader-icon'></i>
      </el-upload>
      <!--      <el-button type='warning' v-if='imageUrl' @click='uploadGoodsImg' i>上传</el-button>-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="uploadAvatar()">确定上传</el-button>
  </span>
    </el-dialog>
  </div>

</template>
<style lang="less" scoped>
.hide::v-deep .el-upload--picture-card {
  display: none;
}
</style>

<script>
import {
  getUserInfo,
  uploadAvatar,
  addUser
} from '../../api/UserApi'
import {mapState} from 'vuex'

export default {
  data() {
    return {
      userInfoALL: {},
      // srcList: ,
      activeName: 'second',
      isUpt: true,
      dialogVisible: false,
      imageUrl: '',
      filelist: [],
      uploadInfo: {}
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    handleClick(tab, event) {
    },
    handleClose() {
      this.dialogVisible = false
    },
    getUserInfo() {
      getUserInfo().then(res => {
        this.userInfoALL = res.data.userInfoAll
        debugger
        if (!this.userInfoALL.imgUrl) {
          this.userInfoALL.imgUrl = "/schoolMall/MALL_GOODS_IMG/userImg/1420039336072327169/63e1a34858374f43b60d9cc952a2dd2620210802.jpg";
        }
      })
    },
    removeChange() {
      this.filelist = []
      this.imageUrl = ''
    },
    async handleChange(file) {
      this.imageUrl = file.raw
      let form = new FormData()
      form.append('httpFile', this.imageUrl)
      const {data: resAll} = await this.$http.post('/mallSysUser/uploadMallGoodsImg', form
          , {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'Token': window.sessionStorage.getItem('token')
            }
          })
      this.userInfoALL.imgUrl = resAll.data.path
      this.imageUrl = 'http://127.0.0.1:8001' + resAll.data.path
      this.filelist = [{url: 'http://127.0.0.1:8001' + resAll.data.path}]

    },
    uploadAvatar() {
      uploadAvatar(this.uploadInfo).then(res => {
        this.dialogVisible = false
        this.getUserInfo()
        this.uploadInfo = {}
      })
    },
    addUser() {
      addUser(this.userInfoALL).then(res=>{
        this.getUserInfo()
      })
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }

}
</script>
